import React, { useState } from "react";
import {
  Box,
  Typography,
  Grid,
  Card,
  CardContent,
  Badge,
  IconButton,
  Button,
  Chip,
  TextField,
  Divider,
  List,
  ListItem,
  ListItemText, ThemeProvider, CssBaseline
} from "@mui/material";
import NotificationsIcon from "@mui/icons-material/Notifications";
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
import InsertChartIcon from "@mui/icons-material/InsertChart";
import QueryBuilderIcon from "@mui/icons-material/QueryBuilder";
import GroupsIcon from "@mui/icons-material/Groups";
import SendIcon from "@mui/icons-material/Send";
import theme from "../themes/theme "

const WarningCenter = () => {
  const [selectedWarning, setSelectedWarning] = useState<any | null>(null);

  const warningList = [
    {
      type: "项目延期风险",
      level: "高",
      time: "2025-06-18",
      project: "数据中台建设",
      status: "未处理"
    },
    {
      type: "进度滞后",
      level: "中",
      time: "2025-06-17",
      project: "智能客服系统",
      status: "未处理"
    },
    {
      type: "资源超支",
      level: "中",
      time: "2025-06-15",
      project: "云平台迁移",
      status: "已处理",
      feedback: "已协调增加2名开发人员支援，预计3天内可追回进度"
    },
    {
      type: "指标达成风险",
      level: "低",
      time: "2025-06-14",
      project: "业务流程优化",
      status: "未处理"
    }
  ];

  const getLevelColor = (level: string) => {
    switch (level) {
      case "高":
        return "error";
      case "中":
        return "warning";
      case "低":
        return "success";
      default:
        return "default";
    }
  };

  return (
   <ThemeProvider theme={theme}>
      <CssBaseline /> 
    <Box sx={{ backgroundColor: "#0f1d33", minHeight: "100vh", color: "#fff", p: 3 }}>
      <Grid container spacing={2}>
        {/* 左侧 - 预警入口 */}
        <Grid item xs={3}>
          <Card sx={{ backgroundColor: "#1a2b4c", p: 2 }}>
            <Typography variant="h6" gutterBottom>预警中心入口</Typography>
            <Box display="flex" alignItems="center" gap={1}>
              <Badge badgeContent={5} color="error">
                <NotificationsIcon fontSize="large" />
              </Badge>
              <Typography>预警中心</Typography>
            </Box>
            <Divider sx={{ my: 2 }} />
            <Box>
              <Typography fontWeight="bold" gutterBottom>
                项目延期风险 - 数据中台建设
              </Typography>
              <Typography variant="body2" color="gray">
                当前进度：65%（计划进度：80%）
              </Typography>
              <Typography variant="body2" color="gray">
                关键节点“数据模型定义”已延迟5天，影响后续开发进度
              </Typography>
              <Typography color="error" mt={1}>
                建议：调整资源配置或申请延期
              </Typography>
              <Box mt={2} display="flex" gap={1}>
                <Button variant="contained" color="primary">申请延期</Button>
                <Button variant="contained" color="success">调整资源</Button>
                <Button variant="outlined">添加备注</Button>
              </Box>
            </Box>
          </Card>
        </Grid>

        {/* 中间 - 预警详情 */}
        <Grid item xs={9}>
          <Card sx={{ backgroundColor: "#1a2b4c", p: 2 }}>
            <Typography variant="h6" gutterBottom>预警列表</Typography>
            <List>
              {warningList.map((item, index) => (
                <Box key={index}>
                  <ListItem
                    secondaryAction={
                      <Button
                        variant="text"
                        onClick={() => setSelectedWarning(item)}
                        sx={{ color: "#4dabf7" }}
                      >
                        {item.status === "已处理" ? "查看" : "处理"}
                      </Button>
                    }
                  >
                    <ListItemText
                      primary={
                        <Box display="flex" alignItems="center" gap={2}>
                          {item.type === "项目延期风险" && <WarningAmberIcon />}
                          {item.type === "进度滞后" && <QueryBuilderIcon />}
                          {item.type === "资源超支" && <GroupsIcon />}
                          {item.type === "指标达成风险" && <InsertChartIcon />}
                          <Typography>{item.type}</Typography>
                          <Chip label={item.level} color={getLevelColor(item.level)} size="small" />
                          <Typography variant="body2" sx={{ ml: 2 }}>{item.project}</Typography>
                          <Typography variant="body2" sx={{ ml: 2 }}>{item.time}</Typography>
                          <Typography variant="body2" sx={{ ml: 2 }}>{item.status}</Typography>
                        </Box>
                      }
                    />
                  </ListItem>
                  {selectedWarning?.project === item.project && (
                    <Box sx={{ ml: 4, mb: 2 }}>
                      {item.feedback && (
                        <Typography variant="body2" color="info.main">
                          {item.feedback}
                        </Typography>
                      )}
                      <Typography variant="body2" mt={1}>
                        技术总监 李华（2025-06-18 15:30）：已了解情况，请密切跟踪进度恢复情况，如有需要可申请额外资源。
                      </Typography>
                      <Box mt={1} display="flex" gap={1}>
                        <TextField
                          fullWidth
                          size="small"
                          placeholder="添加反馈..."
                          variant="filled"
                          sx={{ backgroundColor: "#0f1d33" }}
                          InputProps={{ disableUnderline: true }}
                        />
                        <IconButton color="primary">
                          <SendIcon />
                        </IconButton>
                      </Box>
                    </Box>
                  )}
                  <Divider sx={{ my: 1 }} />
                </Box>
              ))}
            </List>
          </Card>
        </Grid>
      </Grid>
    </Box>
   </ThemeProvider> 
  );
};

export default WarningCenter;
